<template>
    <div class="fujing">

        <div class="header_ding">
            <mt-header class="yan" title="附近门店">     
                <router-link to="/" slot="left">
                    <img  class="zuo_jian" src="../aimg/zuo.png" alt="">
                </router-link>           
            </mt-header>

                <div class="start_kai">   
                    <div>   
                        <div v-if="abc">
                            <span  class="span_qu"  @click="load">{{quyu}}
                            <img src="../aimg/xia.png" alt="">
                        </span>
                        </div>       
                        
                        <div v-else class="qu_fu">
                            <span class="span_qu2"   @click="load2">{{quyu1}}
                                <img src="../aimg/shang.png" alt="">
                            </span>       
                            <div class="qu_zi">
                                    <button class="qu_zi_quan" @click="quan">全部区域</button><br>
                                    <button class="qu_zi_quan" @click="jia">嘉定区</button>
                                    <button class="qu_zi_quan" @click="pu">浦东新区</button>
                                    <button class="qu_zi_quan" @click="min">闵行区</button>
                                    <button class="qu_zi_quan" @click="tuo">普陀区</button>
                            </div>  
                        </div>
                        <div></div>
                        <div @click="jing_zong">
                            <div v-if="zui_jing" class="a1"><a href="#">离我最近</a></div>                     
                            <div v-else class="a1"><a href="#" style="color:black">离我最近</a></div>
                        </div>
                       
                        <span class="span_pic" @click="jian_huang">
                            <span v-if="zu_jing">租金排序</span>
                            <span v-else style="color:coral">租金排序</span>
                            <img v-if="shang_huang" class="img_a" src="../aimg/shanghei.png">
                            <img v-else class="img_a" src="../aimg/shang.png">
                            
                            <br>
                            <img v-if="xia_huang" class="img_i" src="../aimg/xia.png" alt="">
                            <img v-else class="img_i" src="../aimg/xiahuang.png" alt="">

                        </span>
                    </div> 
                </div>
        </div><br><br><br><br>
        
        <div v-for="(item,i) of list" :key="i" >
            <div class="dian"  @click="goto(item.nid)">
                <img class="dianpic" :src="item.tepic" alt="">
                <div class="neirong">
                    <span class="mingzi">{{item.iname}}</span><br>
                    <span class="didian">{{item.iadress}}</span><br>
                    <div class="jiage">
                        <span>{{item.iscore.split("元")[0]}}</span>
                        <span>元/月起</span>
                    </div>
                </div>  
            </div>           
            <div class="border_bottom"></div>            
        </div>
        <div>
        <span class="mingzi">{{this.list.iname}}</span>

        </div>
        <!-- <tabbar :nav="name"></tabbar> -->
    </div>
</template>
<script>
    export default{
        data(){
            return{
                oldlist:[],
                list:[],              
                abc:true,
                name:"fujing",
                oldlist:"",
                quyu:"全部区域",
                quyu1:"全部区域",
                shang_huang:true,
                count:0,
                xia_huang:true,
                zu_jing:true,
                zui_jing:true,
            }
        },
        methods:{
            jing_zong(){
                this.zui_jing=true;
                this.zu_jing=true;
                this.shang_huang=true;
                this.xia_huang=true;
                this.count=0;
            },
            jian_huang(){
                this.zui_jing=false;
                this.zu_jing=false;
                this.xia_huang = false;             
                this.count++;
                // console.log(this.count)
                if(this.count>0,this.count%2!==0){
                    let score=[];
                    for(let i of this.list){
                        score=[...score,i.iscore.split("元")[0]];
                    }
                    score.sort((a,b)=>{
                        return(a-b);
                    })

                    let newscore=[];
                    for(var b=0; b<this.list.length;b++){
                        for(let a of this.list){
                            // console.log(   a.iscore.split("元")[0]);
                            if(a.iscore.split("元")[0]==score[b]){
                                newscore[b]=a.iscore;
                                // console.log(newscore);   
                            }          
                        }
                    }
                    console.log(newscore);
                    let newlist=[];
                    for(var d=0;d<newscore.length;d++){
                        for(let c of this.list){
                            if(c.iscore==newscore[d]){
                                newlist[d]=c;
                                // console.log(newlist)
                            }
                        }
                    }
                    this.list=newlist;
                    this.xia_huang=false;
                    this.shang_huang=true;
                }else if(this.count>0,this.count%2==0){
                    this.xia_huang=true;
                    this.shang_huang=false;
                    let score2=[];
                    // let score3=[];
                    for(let e of this.list){
                       score2=[...score2,e.iscore]
                    }
                    // console.log(score2);
                    // score3=score2.sort();
                    // console.log(score3);
                    let newlist2=[];
                    let h=0;
                    for(var f = score2.length-1;f>=0;f--){
                        for(let g of this.list){
                            if(g.iscore==score2[f]){
                                // newlist2[f]=g;
                                // console.log(g.iscore);                           
                                newlist2[h]=g;
                                h++;
                                console.log(newlist2);
                            }
                        }
                    }
                    this.list=newlist2;
                    console.log(newlist2)
                }
            },
            quan(){
                this.list=this.oldlist;
                this.abc=true;
                this.quyu="全部区域";
                this.quyu1="全部区域";
                },
            jia(){
                this.list=this.oldlist;
                let arr=[];
                //    console.log("开始遍历")
                for(let i of this.list){
                    if(i.iname=="泊寓-安亭一期店"||i.iname=="泊寓-虹桥安亭二期店"){
                        arr=[...arr,i];
                        // arr.push(i);
                    }
                }
                this.list=arr;
                this.abc=true;
                this.quyu="嘉定区";
                this.quyu1="嘉定区";
            },
            pu(){
                this.list=this.oldlist;
                let arr1=[];
                for(let i of this.list){
                    if(i.iname=="泊寓-翡翠公园一期店"||i.iname=="泊寓-张江国创店"){
                        arr1=[...arr1,i];
                    }
                }
                this.list=arr1;
                this.abc=true;
                this.quyu="浦东新区";
                this.quyu1="浦东新区";
            },
            min(){
                this.list=this.oldlist;
                let arr2=[];
                for(let i of this.list){
                    if(i.iname=="泊寓-虹桥南华园二期店"||i.iname=="泊寓-莘庄疏影店"||i.iname=="泊寓-虹桥国展店"||
                    i.iname=="泊寓-虹桥南华园一期店"||i.iname=="虹寓 | 泊寓-虹口江湾店"){
                        arr2=[...arr2,i];
                    }
                }
                this.list=arr2;
                this.abc=true;
                this.quyu="闵行区";
                this.quyu1="闵行区";
            },
            tuo(){
                this.list=this.oldlist;
                let arr3=[];
                for(let i of this.list){
                    if(i.iname=="泊寓-上海西站店"){
                        arr3=[...arr3,i];
                    }
                }
                this.list=arr3;
                this.abc=true;
                    this.quyu="普陀区";
                this.quyu1="普陀区";
            },
            tiao(){
                this.$router.push("/")
            },
            goto(kid){
                this.$router.push(`/xiangqing/${kid}`)
            },
            load(){
                this.abc=false;
            },
            load2(){
                this.abc=true;
            },
            loadPage(){
                this.axios.get("/store_suo/v1/search"
                ).then(res=>{
                    console.log(res.data);
                    this.list=res.data;
                    this.oldlist=res.data;
                    // console.log(res.data[0].iscore.split("元")[0]);                  
                    // console.log(res.data[0].iscore.slice(0,5))
                    // this.score=res.data.iscore;
                    // console.log(this.score);
                })
            }
        },
        mounted(){
            this.loadPage();
        }
    }
   
</script>

<style scoped>
*{margin: 0;padding: 0;}
.fujing{
    margin-bottom: 70px;
}
.header_ding{
    position: fixed;
    width: 100%; height: 59px;
    top:0;
    background-color: white;
}
.yan{
    background-color: white;
    color: black;
    font-size: 16px;
}
.zuo_jian{
    width: 25px;height: 25px;
}
.start_kai{
    width: 100%;
    /* text-align: center; */
    margin-bottom: 10px;
}
.span_qu{
    font-size: 12px;
    margin-left: 15px;
}
.span_qu>img{
    width: 12px;
    margin-top: -4px;
}
.span_qu2{
    font-size: 12px;
    margin-left: 14px;
    color: rgb(255, 126, 79);
}
.span_qu2>img{
    width: 12px;
    margin-top: -5px;

}
.qu_fu{
    position: relative;

}
.qu_zi{
    position: absolute;
    width: 100%;
    height: 90px;
    background-color: white;
}
.qu_zi_quan{
    width: 70px;height: 30px;
    background-color: white;
    border-radius: 5px;
    border:1px solid rgb(159, 161, 161);
    margin: 10px;
    font-size: 13px;  
    /* color: rgb(255, 126, 79); */
}

/* .select_zong{
    font-size: 12px;
    outline: none;
    border:none;
    margin-top: 14px;
    margin-left: 14px;
} */
.start_kai a{
    /* width: 30px; */
    color: black;
    font-size: 12px;
}
.a1{
    /* width: 50px; */
    text-align: center;
    margin-top: -16px;
}
.a1>a{
    color: coral;

}
.span_pic{
    font-size: 12px;
    float: right;
    margin-top: -13px;
}
.img_a{
    width: 10px;
    height: 15px;
    margin-top: -8px;
    margin-right: 12px;
}
.img_i{
    width: 10px;
    height: 15px;
    margin-top: -18px;
    margin-left: 48px;
}
.dian{
    /* margin-left: 2px; */
    display: flex;
    margin-top: 9px;
}
.neirong{
    margin-left: 10px;
}
.dianpic{
    width: 108px;
    height: 72px;
    margin-left: 16px;
    border-radius: 5px;
}
.mingzi{
    font-weight: 600;
    display: inline-block;
    margin-top: 3px;
    margin-left: 3px;
}
.didian{
    color:#7c7b7b;
    font-size: 12px;
    display: inline-block;
    margin-left: 3px;
    margin-top: 7px;
}
.jiage :nth-child(1){
    color: coral;
    font-weight: 800;
    font-size: 20px;
}
.jiage :nth-child(2){
    font-size: 12px;
}
.jiage{
    margin-top: 8px;
    margin-left: 3px;
}
.border_bottom{
    height: 1px;width: 100%;
    border-bottom: 1px solid rgb(243, 239, 239);
    /* position: fixed; */
    margin-top: 6px;    
    /* display: none; */
  }
</style>